.dashboard-state-active {
  color: @brand-success;
}

html.rtl .rui.admin.action-view {
  border-right: 1px solid @black20;
}

html:not(.rtl) .rui.admin.action-view {
  border-left: 1px solid @black20;
}

.rui.admin.action-view {
  .display(flex);
  .flex(0 0 auto);
  height: 100%;
  background-color: @white;
  width: 0;
  overflow: hidden;
  .transition(width 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955));
  z-index: 100;

  @media screen and (max-width: @screen-xs-max) {
    transition: top 400ms cubic-bezier(0.645, 0.045, 0.355, 1);

    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 100vh;
    left: 0;
    z-index: @zindex-modal;
    box-shadow: none;
  }
}

.admin-controls .nav-dashboard {
  .padding-left(0);
  .padding-right(0);
}

.rui.admin.action-view.show-settings {
  border-right: 1px solid @border-color;
  width: 400px;

  @media screen and (max-width: @screen-lg-min) {}

  @media screen and (max-width: @screen-sm-max) {
    box-shadow: 0 0 40px rgba(0,0,0,.1);
    border: none;
  }

  @media screen and (max-width: @screen-xs-max) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
  }
}

.rui.toolbar.admin-shortcut-bar {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  // Disable horizontal scrollbar, and vertical unless needed
  overflow-x: hidden;
  overflow-y: auto;

  min-width: @admin-controls-menu-width;
  width: @admin-controls-menu-width;

  background-color: @white;
  position: relative;
  z-index: @zindex-modal;

  @media screen and (max-width: @screen-xs-max) {
    order: 2;
    min-width: 100%;
    border-top: 1px solid @border-color;
  }
}

// Admin action pane slide in/out animation
.admin.rui.action-view-pane {
  &.slide-in-out-enter,
  &.slide-in-out-exit-active {
    transform: translateX(100%);
  }
  &.slide-in-out-rtl-enter,
  &.slide-in-out-rtl-exit-active {
    transform: translateX(-100%);
  }

  &.slide-in-out-enter-active,
  &.slide-in-out-rtl-enter-active,
  &.slide-in-out-exit-active,
  &.slide-in-out-rtl-exit-active {
    transition: transform 200ms ease-in-out;
  }

  &.slide-in-out-enter-active,
  &.slide-in-out-rtl-enter-active {
    transform: translateX(0%);
  }
}

.admin-shortcut-bar nav {
  flex-direction: column;

  @media screen and (max-width: @screen-xs-max) {
    flex-direction: row;
    flex: 1 1 auto;
  }
}

.admin-shortcut-bar nav .icon-reaction-logo {
    font-size: 3.2rem;
}

.admin-shortcut-bar nav .btn.active {
  color: @component-active-color;
  background-color: @component-active-bg;
}

@media screen and (max-width: @screen-xs-max) {

  .admin-controls-quicklinks {
    order: 2;
  }

  .admin-controls-actions {
    justify-content: center;
    order: 1;
    border-bottom: 1px solid @border-color;
  }

  .rui.toolbar.admin-shortcut-bar {
    display: none;
  }

  // .admin-shortcut-bar .admin-controls-actions a,
  // .admin-shortcut-bar .admin-controls-actions button {
  //   width: 44px;
  //   height: 44px;
  //   min-width: 44px;
  //   min-height: 44px;
  // }
}

.admin-shortcut-bar hr {
  width: 100%;
  border-top: 1px solid @border-color;
}

.admin-controls-detail {
  .display(flex);
  .flex-direction(column);
  .flex(1 1 auto);
  min-width: 400px;
  width: 400px;
  max-width: 100vw;
  border-right: 1px solid @black10;
}

.admin-controls.show-settings .admin-controls-detail {
  border-right: 1px solid @black10;
}

.admin-controls-heading {
  .flex(0 0 auto);
  border-bottom: @border-thin;
}

.admin-controls-content {
  .flex(1 1 auto);
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.admin-controls-content .panel-default > .panel-heading {
  background-color: lighten(@black05, 2%);

  &.validation {
    background-color: @rui-danger-bg;
    color: @rui-danger-text;
  }
}

.admin-controls-content .admin-controls-container {
  padding: 20px;
}

// Only apply form-control styles to non .rui form fields
// This should only apply to normal BS3 / Autoform fields
.admin-controls-content .form-group:not(.rui) input:not([type=checkbox]) {
  .form-control;
}

.admin-controls-content .form-group:not(.rui) select {
  .form-control;
}

body.admin-vertical .admin-controls {
  height: 20vh;
  min-width: 100%;
  max-width: 100%;
}

.admin-control-open {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background-color: rgb(239, 102, 198);
  color: white;
  padding: 10px 15px;
}

.admin-controls-toolbar {
  padding-left: 20px;
}

// patch for autoform's mysteriously
// not getting the form-control class
.admin-controls-content form label {
  font-weight: lighter;
  color: @rui-default-text;
  letter-spacing: .02rem;
}

.rui.admin.action-view {
  z-index: @zindex-modal;
}

.rui.admin.action-view.open {
  @media screen and (max-width: @screen-xs-max) {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }
}


.rui.admin.action-view .panel {
  border: 0;
  border-radius: 0;
  border-top: 1px solid @border-color;
  margin-bottom: 0;
}


.rui.admin.action-view-pane .header {
  border-bottom: 1px solid @border-color;
}

// .rui.admin.action-view-pane .header .heading {
//   margin: 0 0 0 2rem;
// }

.rui.admin.action-view-pane .header .title {
  margin: 0;
  letter-spacing: 0.03rem;
  color: @rui-default-text;
}

.rui.admin.action-view-detail {
  display: flex;
  border: 0;
  border-radius: 0;
  border-left: 1px solid @border-color;
  margin-bottom: 0;
}

.rui.admin.action-view-pane .panel-body.no-padding .list-group-item {
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

.rui.admin.action-view-pane .panel-group > .panel:first-child {
  border-top: none;
}

.rui.admin.action-view-pane .panel-group > .panel:last-child {
  border-bottom: 1px solid @list-group-border;
}
